<template>
    <div>
        <el-row :gutter="20" type="flex" class="row-bg" justify="center">
	<mycard v-for="card in cards" :card="card" :key="card.index"/>
        </el-row>
	
    </div>
</template>

<script>
    import mycard from '@/components/mycard'
    export default {
        name: "show",

        components: {
	    mycard
        },

        data() {
            return {
		cards: null
            }
        },
	created() {
	    this.getMessage();
	},
        methods: {
             getMessage(){
		this.$request.get('http://116.62.44.244:81/show/cards')
		.then((response) => {
                    // 回调函数，获取后端返回的数据
                    //console.log(response.data.cards)
		    this.cards=response.data.cards;
		    //console.log(this.cards);
                }).catch((error) => {
                    // 捕捉异常并抛出
                    console.log(error);
                });
	    }
        }
    }
</script>

<style scoped>

  .el-row {
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    margin: 10px;
    border-radius: 4px;
  }
</style>